<template>
    <div class="BuddyList">
        <div class="BuddyListHead">
            <seach class="search"></seach>
        </div>
        <div class="BuddyListContent">
            <div class="BuddyListContentGroup">
                <p>双击分组名称可修改分组名，可点击<span class="BuddyListContentGroupSpan" @click="GroupManage">分组管理</span>操作详情</p>
                <p>单击好友信息可以进行聊天</p>
            </div>
            <div class="BuddyListContentBuddy">
                <div v-if="BuddyList.length > 0">
                    <div class="BuddyListContentBuddyBox" v-for="item in BuddyList" :key="item.groupId">
                        <div class="BuddyListContentBuddyHeader">
                            <img src="../../assets/SVG/Left.svg" @click="ActiveHiddenChilred(item.groupId)" alt=""
                                v-if="!FlagList[item.groupId]">
                            <img src="../../assets/SVG/bottom.svg" @click="ActiveHiddenChilred(item.groupId)" alt=""
                                v-if="FlagList[item.groupId]">
                            <span @dblclick="BuddyListUpdate(item.groupName, item.groupId)">{{ item.groupName }}</span>
                        </div>
                        <div v-if="FlagList[item.groupId]">
                            <div class="BuddyListContentBuddyConter">
                                <div class="BuddyListContentBuddyConterBox" v-if="item.children">
                                    <div class="BuddyListContentBuddyConterBoxContent" v-for="item1 in item.children"
                                        :key="item1.userId" @click="ActiveBuddy(item1, item.groupId)">
                                        <!-- {{ item1 }} -->
                                        <span class="">昵称：{{ item1.userNickname }}</span>
                                        <span class="">邮箱：{{ item1.userMailbox }}</span>
                                    </div>
                                </div>
                                <div class="BuddyListContentBuddyConterBox" v-else>
                                    <Zky_Error style="width:40%" :title="'当前暂无好友'"></Zky_Error>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else>
                    <Zky_Error :title="'当前暂无好友及分组'"></Zky_Error>
                </div>
            </div>
        </div>
        <div class="Popup">
            <!-- 分组管理 -->
            <Zky_Popup v-model:hidden="GroupHidden" :title="'分组管理'">
                <!-- <div class="GroupListHeader">
                </div> -->
                <div class="GroupListContent">
                    <div class="GroupList" v-if="GroupList.length > 0">
                        <div style="text-align:center;margin-bottom: 20px;">
                            <button data-text style="padding: 0;" @click="BuddyListAdd">添加分组</button>
                        </div>
                        <div class="GroupListBox" v-for="item in GroupList" :key="item.groupId">
                            <div class="" style="margin-bottom: 20px;">
                                <span style="margin-right: 20px;">分组名：{{ item.groupName }}</span>
                                <span>创建时间：{{ item.groupTime }}</span>
                                <button data-text @click="BuddyListUpdate(item.groupName, item.groupId)">修改分组</button>
                                <button data-text @click="BuddyListDelete(item.groupId)">删除分组</button>
                            </div>
                        </div>
                    </div>
                    <div class="GroupList" v-else>
                        <div style="text-align:center;">
                            <button data-text style="padding: 0;" @click="BuddyListAdd">添加分组</button>
                        </div>
                        <Zky_Error :title="'您还没用任何分组'" style="margin: 0;"></Zky_Error>
                    </div>
                </div>
            </Zky_Popup>
            <!-- 修改分组 -->
            <Zky_Popup v-model:hidden="GroupUpdateHidden" :title="PopupTitle" :Confirm="GroupUpdateConfirm">
                <div v-if="PopupType != 'delete'">
                    <div class="GroupUpdateBox" v-if="PopupType == 'update'">
                        <label>当前分组名</label><a-input v-model:value="Group.oldname" readonly></a-input>
                    </div>
                    <div class="GroupUpdateBox">
                        <label>新分组名</label><a-input v-model:value="Group.groupName" placeholder="请输入当前分组名称"></a-input>
                    </div>
                </div>
                <div v-if="PopupType == 'delete'" style="text-align: center;">
                    <span style="color:red">
                        分组删除不可逆转，请谨慎操作
                    </span>
                </div>
            </Zky_Popup>

            <!-- 好友弹窗 -->
            <Zky_Popup v-model:hidden="BuddyHidden" :title="BuddyTitle">
                <div v-if="Buddy.Flag != '4'" class="BuddyPopupBox">
                    <button @click="ActiveChat">在线聊天</button>
                    <button @click="UpdateBuddyGroup">修改分组</button>
                    <button data-error @click="DeleteBuddy">删除好友</button>
                    <button data-error @click="ShieldBuddy">拉黑好友</button>
                </div>
                <div v-if="Buddy.Flag == '4'" class="BuddyPopupBox">
                    <button @click="CancelShieldBuddy">移除黑名单</button>
                    <button @click="AddShieldBuddy">添加好友</button>

                </div>

            </Zky_Popup>
            <!-- 好友弹窗二级操作 -->
            <Zky_Popup v-model:hidden="BuddyChilredHidden" :title="BuddyChilreTitle" :Confirm="BuddyChildrenActive">
                <div v-if="BuddyType == 'update'" class="GroupListContent">
                    <div class="GroupList" v-if="BuddyGroup.length > 0">
                        <a-form :model="Buddy" :rules="rules" ref="BuddyDom">
                            <a-form-item label="当前分组名">
                                <a-input placeholder="请输入分组名" v-model:value="Buddy.oldGroup" readonly></a-input>
                            </a-form-item>
                            <a-form-item label="分组" name="userMailboxType">
                                <a-select v-model:value="Buddy.userMailboxType">
                                    <a-select-option v-for="item in BuddyGroup" :key="item.groupId" :value="item.groupId">{{
                                        item.groupName }}</a-select-option>
                                </a-select>
                            </a-form-item>
                        </a-form>
                    </div>
                    <div class="GroupList" v-else>
                        <Zky_Error :title="'您除了当前分组没有其他任何分组了'" style="margin: 0;"></Zky_Error>
                    </div>
                </div>
                <div v-else-if="BuddyType == 'delete'" style="text-align: center;color:red;">
                    删除好友操作不可逆,请谨慎操作
                </div>
                <div v-else-if="BuddyType == 'shield'" style="text-align: center;color:red;">
                    拉黑后。进入黑名单，并且您将再对方的好友列表中被移除，该操作不可逆转,请谨慎操作。
                </div>
                <div v-else-if="BuddyType == 'addshield'" style="text-align: center;color:red;">
                    确认后将重新发起好友申请，需要等待对方通过之后才能成为好友
                </div>

            </Zky_Popup>
        </div>
    </div>
</template>

<script setup lang="ts">
import seach from '../../components/seach.vue';
import { useRouter } from 'vue-router';
import { ref, onMounted } from "vue"
import Axios from '../../Axios/Axios';
import { message } from 'ant-design-vue';
import { Time } from "../../utils/Time"
import { main } from '../../store';
const Mains = main()
const router = useRouter()
const GroupHidden = ref(false)
const GroupUpdateHidden = ref(false)
const BuddyHidden = ref(false)
const BuddyChilredHidden = ref(false)
const BuddyDom = ref()
const PopupTitle = ref("")
const BuddyChilreTitle = ref("")
const BuddyTitle = ref("")
const PopupType = ref("")
const BuddyType = ref("")
const FlagList = <{ [index: string]: any }>ref({})
const BuddyList = ref([{
    groupId: "",
    groupName: "",
    Flag: false,
    children: [{
        userId: "",
        userNickname: "",
        userMailbox: "",
    }]
}])
const GroupList = ref([{
    groupId: "",
    groupName: "",
    groupTime: "",

}])
const BuddyGroup = ref([{
    groupId: "",
    groupName: "",
    groupTime: ""
}])
const Group = ref({
    oldname: "",
    groupName: "",
    groupId: ""
})
const Buddy = ref({
    oldGroup: "",
    userMailboxType: "",
    userMailbox: "",
    Flag: ""
})
const rules = {
    userMailboxType: [{
        required: true, message: "请选择分组", trigger: "blur"
    }]
}
onMounted(async () => {
    await Init()
})
Mains.Home = 1
Mains.Buddy = 2
// 二级弹窗点击事件
const BuddyChildrenActive = async () => {
    if (BuddyType.value == "update") {
        BuddyDom.value.validate().then(async () => {
            const res = await Axios("GroupUpdateGroup", Buddy.value)
            if (res.code == 200) {
                await Init()
                await InitGroup()
                message.success(res.message)
                BuddyChilredHidden.value = false
            } else {
                message.warning(res.message)
            }

        })
    } else if (BuddyType.value == "delete") {
        const res = await Axios("BuddyDelete", Buddy.value)
        if (res.code == 200) {
            await Init()
            await InitGroup()
            message.success(res.message)
            BuddyChilredHidden.value = false
            BuddyHidden.value = false
        } else {
            message.warning(res.message)
        }
    } else if (BuddyType.value == "shield") {
        const res = await Axios("BuddyShield", Buddy.value)
        if (res.code == 200) {
            await Init()
            await InitGroup()
            message.success(res.message)
            BuddyChilredHidden.value = false
            BuddyHidden.value = false
        } else {
            message.warning(res.message)
        }
    }
    else if (BuddyType.value == "addshield") {
        const res = await Axios("CancelBlackListBuddyApply", Buddy.value)
        if (res.code == 200) {
            await Init()
            await InitGroup()
            message.success(res.message)
            BuddyChilredHidden.value = false
            BuddyHidden.value = false
        } else {
            message.warning(res.message)
        }
    }
}
// 在线聊天
const ActiveChat = () => {
    router.push({
        name: "/Chat",
        query: {
            id: Buddy.value.userMailbox
        }
    })
}
//向黑名单好友重新发起好友申请
const AddShieldBuddy = () => {
    BuddyType.value = "addshield"
    BuddyChilredHidden.value = true
    BuddyChilreTitle.value = "添加好友"
}
// 取消黑名单
const CancelShieldBuddy = async () => {
    const res = await Axios("CancelBlackList", Buddy.value)
    if (res.code == 200) {
        await Init()
        await InitGroup()
        message.success(res.message)
        // BuddyChilredHidden.value = false
        BuddyHidden.value = false
    } else {
        message.warning(res.message)
    }
}

// 拉黑好友
const ShieldBuddy = () => {
    BuddyType.value = "shield"
    BuddyChilredHidden.value = true
    BuddyChilreTitle.value = "拉黑好友"
}

// 删除好友
const DeleteBuddy = () => {
    BuddyType.value = "delete"
    BuddyChilredHidden.value = true
    BuddyChilreTitle.value = "删除好友"
}

// 修改好友分组
const UpdateBuddyGroup = () => {
    BuddyType.value = "update"
    BuddyChilredHidden.value = true
    BuddyChilreTitle.value = "修改好友分组"
}
// 点击好友信息
const ActiveBuddy = async (obj: any, id: string) => {
    BuddyTitle.value = `'${obj.userNickname}' 好友管理`
    Buddy.value.userMailbox = obj.userMailbox
    Buddy.value.Flag = obj.userMailboxType

    // 过滤当前分组
    await InitGroup()
    let one = JSON.parse(JSON.stringify(GroupList.value))

    if (one.length > 0) {
        BuddyGroup.value = one.filter((el: any) => el.groupId != id)
        one.forEach((el: any) => {
            if (el.groupId == id) {
                Buddy.value.oldGroup = el.groupName
            }
        })

    } else {
        BuddyGroup.value = []
    }
    BuddyHidden.value = true


}

// 点击控制好友显示
const ActiveHiddenChilred = (id: string) => {
    FlagList.value[id] = !FlagList.value[id]
}

// 二级分组确认按钮
const GroupUpdateConfirm = async () => {
    // 修改分组事件
    if (PopupType.value != "delete") {
        if (Group.value.groupName != '') {
            if (Group.value.groupName.length >= 2 && Group.value.groupName.length <= 6) {
                const pattern = /^[\u4e00-\u9fa5]{0,}$/
                if (pattern.test(Group.value.groupName)) {
                    if (PopupType.value == "update") {
                        const res = await Axios("GroupUpdateName", Group.value)
                        if (res.code == 200) {
                            message.success(res.message)
                            await InitGroup()
                            await Init()
                            GroupUpdateHidden.value = false
                        } else {
                            message.warning(res.message)
                        }
                    } else if (PopupType.value == "add") {
                        const res = await Axios("GroupInsertInformation", Group.value)
                        if (res.code == 200) {
                            message.success(res.message)
                            await InitGroup()
                            await Init()
                            GroupUpdateHidden.value = false
                        } else {
                            message.warning(res.message)
                        }
                    }


                } else {
                    message.warning("分组名只支持中文")
                }
            } else {
                message.warning("分组名长度再2-6之间")
            }
        } else {
            message.warning("您没有输入新分组名称")
        }
    } else if (PopupType.value == "delete") {
        const res = await Axios("GroupDelete", Group.value)
        if (res.code == 200) {
            message.success(res.message)
            await InitGroup()
            await Init()
            GroupUpdateHidden.value = false
        } else {
            message.warning(res.message)
        }
    }

}
// 删除分组
const BuddyListDelete = (id: string) => {
    Group.value = {
        oldname: "",
        groupName: "",
        groupId: "",
    }
    Group.value.groupId = id
    GroupUpdateHidden.value = true
    PopupTitle.value = "删除分组"
    PopupType.value = "delete"
}

// 添加分组
const BuddyListAdd = () => {
    Group.value = {
        oldname: "",
        groupName: "",
        groupId: ""
    }
    GroupUpdateHidden.value = true
    PopupTitle.value = "新增分组"
    PopupType.value = "add"
}

// 修改分组
const BuddyListUpdate = (name: string, id: string) => {
    Group.value = {
        oldname: "",
        groupName: "",
        groupId: ""
    }
    Group.value.oldname = name
    Group.value.groupId = id
    GroupUpdateHidden.value = true
    PopupTitle.value = "修改分组"
    PopupType.value = "update"
}

// 点击分组管理
const GroupManage = async () => {
    await InitGroup()
    GroupHidden.value = true
}
// 初始化分组信息
const InitGroup = async () => {
    const res = await Axios("GroupNumber")
    GroupList.value = []
    GroupList.value = res.data
    if (GroupList.value.length > 0) {
        GroupList.value.forEach(el => {
            if (el.groupTime) {
                el.groupTime = Time(new Date(el.groupTime))
            } else {
                el.groupTime = "特殊分组无时间"
            }
        })
    }


}
// 页面初始化信息
const Init = async () => {
    const res = await Axios("BuddyAll")
    BuddyList.value = []
    if (res.code == 200) {
        BuddyList.value = res.data
        if (BuddyList.value.length > 0) {
            // el.Flag = false
            // 判断当前对象是否有值
            if (Object.keys(FlagList.value).length === 0) {
                BuddyList.value.forEach(el => {
                    FlagList.value[`${el.groupId}`] = false
                })
            } else if (Object.keys(FlagList.value).length !== BuddyList.value.length) {
                // 当对象个数和数组长度不一样的时候重新给对象赋值
                const one = Object.keys(FlagList.value)
                BuddyList.value.forEach(el => {
                    // 判断one数组中是否包含数据数组的id,包含则不操作。不包含添加数组
                    if (!one.includes(el.groupId + "")) {
                        FlagList.value[`${el.groupId}`] = false
                    }
                })
            }
        }
    }
}
</script>

<style scoped lang="scss">
.BuddyPopupBox {
    text-align: center;

    button {
        margin: 0 10px;
    }
}

.BuddyListContentBuddyConterBoxContent {
    margin: 10px 0 10px 20px;
    cursor: pointer;

    span {
        margin-right: 40px;
    }
}

.BuddyListContentBuddyHeader {
    cursor: pointer;

    img {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }
}

.BuddyListHead {

    display: flex;

    .search {
        flex: 9;
    }

    button {
        flex: 1;
    }


}

.BuddyListContent {
    margin-top: 20px;

    p {
        margin: 0;
    }

    .BuddyListContentGroup {
        margin-bottom: 20px;
    }

    .BuddyListContentGroupSpan {
        cursor: pointer;
        color: #2f46fa;
        text-decoration: underline;
    }
}

.GroupUpdateBox {
    margin-bottom: 10px;
    display: flex;

    label {
        width: 12%;
    }

    input {
        width: 84%;
    }
}
</style>